<template>
  <div class="container">
    <div class="block" v-for="n in 21">
      <template v-if="defer(n)">
        <heavy-comp></heavy-comp>
      </template>
    </div>
  </div>
</template>

<script>
import HeavyComp from "./components/HeavyComp.vue";
import defer from "./mixin/defer";
export default {
  mixins: [defer(21)],
  components: { HeavyComp },
};
</script>

<style scoped>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-gap: 10px;
}
.container .block {
  border: 1px solid #f00;
}
</style>
